import axios from 'axios'
import React, { Component } from 'react'
import TopHeader from '../../components/TopHeader';
export default class NewsDetail extends Component {
    state = {
        news: {}
    }

    //发送 AJAX 请求获取数据
    async componentDidMount(){
        //获取 url 的 id 值
        let id = this.props.match.params.id;
        //发送 AJAX 请求
        let result = await axios('/nc/article/'+id+'/full.html');
        //获取新闻数据
        let data = result.data[id];
        //遍历新闻图片, 并替换 body 中的标志 (这一步可以选做)
        data.img.forEach(item => {
            data.body = data.body.replace(item.ref, `<img width="100%" src="${item.src}" alt="" />`)
        })
        //最终设置数据
        this.setState({
            news: data
        })
    }

    render() {
        let {title, body} = this.state.news;
        //
        return (
            <div className="news-detail">
                <TopHeader />
                <h2>{title}</h2>
                <hr />
                <p dangerouslySetInnerHTML={{__html: body}}></p>
            </div>
        )
    }
    
}
